<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>微信</title>
	<link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/home.css" />

	<style>
		.notgo{
			color: #ff0000 !important;
		}
	</style>
</head>

<body>
	<div id="chat">
		<div class="sidebar">
			<div class="m-card">
				<header>
					<img class="avatar" style="width: 40px; height: 40px;" :src="user.uimage">
					<p class="name" v-text="user.nickName"></p>
				</header>
				<!-- <footer><input class="search" placeholder="搜索好友..."></footer> -->
				<div class="list_btn" style="padding-top: 10px;">
					<ul class="nav">
						<li class="a_btn" :class="{active:card == 1}" @click="card = 1">
							<a href="javascript:void(0);">最近<span class="badge" style="background-color:#ee3f48;position:absolute" v-text="showAllNotRead()"></span></a>
						</li>
						<li class="a_btn" :class="{active:card == 2}" @click="card = 2"><a href="javascript:void(0);">好友</a></li>
						<li class="a_btn" :class="{active:card == 3}" @click="card = 3"><a href="javascript:void(0);">阅读</a></li>
					</ul>
				</div>
			</div>
			<!--v-component-->
			<div class="m-list">
				<ul v-if="card == 1">
					<!--聊天列表start-->
					<li v-for="mess in recently" @click="chatWindow(mess)">
						<img class="avatar" style="float: left;width: 38px;height: 38px;" alt="webpack" :src="mess.friend.myFriend.uimage">
						<div>
							<p class="name" v-text="mess.friend.hisRemark ? mess.friend.hisRemark : mess.friend.myFriend.nickName"></p>
							<span class="badge" style="background-color:#ee3f48;" v-text="showNotRead(mess)"></span>
							<div class="newest" v-html="showNewestInfo(mess)"></div>
						</div>
					</li>
				</ul>
				<ul v-if="card == 2">
					<!-- 好友列表start -->
					<li v-for="friend in friends" @click="chatWindow(friend, 1)">
						<img class="avatar" width="30" height="30" alt="webpack" :src="friend.myFriend.uimage">
						<p class="name" v-text="friend.hisRemark ? friend.hisRemark : friend.myFriend.nickName"></p>
					</li>
				</ul>
				<ul v-if="card == 3">
					<!--群start-->
					<li>
						<img class="avatar" width="30" height="30" alt="webpack" src="picture/default.png">
						<p class="name">功能开发中...</p>
					</li>
				</ul>
			</div>
			<!--v-component-->

			<!-- 底栏 -->
			<div class="list_btn">
				<ul class="nav">
					<li>
						<a href="javascript:void(0);" id="a_add" title="添加好友">
							<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
						</a>
					</li>
					<li>
						<a href="javascript:void(0);" id="a_alt" title="通知">
							<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
							<span class="badge" style="background-color:#ee3f48;position:absolute" v-text="infoNum ? infoNum : ''"></span>
						</a>
					</li>
					<li><a href="javascript:void(0);" id="a_cog"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
				</ul>
			</div>
		</div>

		<div class="main">
			<div class="windowChatDefault" style="margin-top:290px;margin-left:380px;" v-if="!isChatting">
				<div style="width:200px;height:200px;">
					<img src="picture/default.png" style="width:100%;" />
				</div>
			</div>
			<!--对方昵称start-->
			<div>
				<h3 class="window-user-name" align="center" v-text="chatting.friend.hisRemark ? chatting.friend.hisRemark : chatting.friend.myFriend.nickName"></h3>
			</div>
			<div class="m-message" id="msgWindows">
				<ul class="msg_ul" v-if="isChatting">
					<!--v-for-start-->
					<li class="msg_li" v-for="mc in chatting.messageContextList" :class="{self:mc.sendUid == user.uid}">
						<p class="time">
							<span></span>
						</p>
						<div class="msg_div">
							<!--对方头像start-->
							<img class="avatar" :src="mc.sendUid == user.uid ? user.uimage : friendsMap[mc.sendUid].myFriend.uimage" />
							<!--对方头像end-->
							<!--对方消息模板start-->
							<div class="text" v-html="dispose(mc)"></div>
							<!--对方消息模板end-->
						</div>
					</li>

					<!-- <li class="msg_li self">
						<p class="time">
							<span></span>
						</p>
						<div class="msg_div">
							<img class="avatar" src="picture/xiaolin.jpg" />
							<div class="my text">666666666666</div>
						</div>
					</li> -->
					<!--v-for-end-->
				</ul>
			</div>
			<!--v-component-->
			<div class="m-text" id="input_text" v-if="isChatting">
				<div style="font-size:20px;" class="toolbar">
					<span @click="showFace()">
						<span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden="true"></span>
					</span>
					<span>
						<span class="glyphicon glyphicon-file" aria-hidden="true">
							<input type="file" onchange="sendFile(this, 'file')" title="选择文件" />
						</span>
					</span>
					<span>
						<span class="glyphicon glyphicon-picture" aria-hidden="true">
							<input type="file" onchange="sendFile(this, 'image')" accept="image/*" title="选择图片" />
						</span>
					</span>
				</div>
				<div class="textarea" id="textarea" contentEditable="true" v-html="draft[chatting.friend.myFriendUid]" onInput="textChange()"
				 @keydown="sendEnter($event)" style="border:0;outline:none;">
				</div>
				<button type="button" @click="sendMC()" class="btn btn-default" style="float:right;margin-right:15px;">发送(Enter)</button>&nbsp;&nbsp;
			</div>
			<!--v-component-->
		</div>
	</div>



	<!-- vue -->
	<script src="js/vue.js"></script>

	<!-- 请求 -->
	<script src="js/axios.min.js"></script>
	<script src="js/request.js"></script>

	<!-- sockjs -->
	<script src="js/sockJS.js"></script>
	<script src="js/stomp.js"></script>

	<!-- layer -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/layer.js"></script>
	<!-- 错误弹窗 -->
	<script>
		function errInfo(res, b) {
			if (res.data.errno == 1 || b) {
				layer.open({
					title: '提示',
					content: res.data.errmsg,
					btn: ['我知道了']
				});
			}
		}

	</script>

	<!-- app代码 -->
	<script src="js/home-main.js"></script>

	<!-- 模块 -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
	<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
	<div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
	<script>

		function textChange() {
			let ruid = vm.chatting.friend.myFriendUid;
			vm.draft[ruid] = $("#textarea").html();
		};

		$('#addModal').load('addModal.html');
		$('#infoModal').load('infoModal.html');
		$('#setModal').load('setModal.html');

		/*添加好友*/
		$("#a_add").click(function () {
			//获得推荐好友
			addWindow.findText = "";
			addWindow.getRecoList();
			$("#addModal").modal("show");
		});
		/*通知*/
		$("#a_alt").click(function () {
			infoWindow.getAddInfo();
			$("#infoModal").modal("show");
		});

		/*通知*/
		$("#a_cog").click(function () {
			setWindow.user = JSON.parse(JSON.stringify(vm.user));
			$("#setModal").modal("show");
		});

		// 在光标位置插入html代码，如果dom没有获取到焦点则追加到最后
		function insertContent(html) {

			let jsDom = document.getElementById('textarea');
			if (jsDom != document.activeElement) { // 如果dom没有获取到焦点，追加
				jsDom.innerHTML = jsDom.innerHTML + html;
				textChange();
				return;
			}
			var sel, range;
			if (window.getSelection) {
				// IE9 或 非IE浏览器
				sel = window.getSelection();
				if (sel.getRangeAt && sel.rangeCount) {
					range = sel.getRangeAt(0);
					range.deleteContents();
					// Range.createContextualFragment() would be useful here but is
					// non-standard and not supported in all browsers (IE9, for one)
					var el = document.createElement("div");
					el.innerHTML = html;
					var frag = document.createDocumentFragment(),
						node, lastNode;
					while ((node = el.firstChild)) {
						lastNode = frag.appendChild(node);
					}
					range.insertNode(frag);
					// Preserve the selection
					if (lastNode) {
						range = range.cloneRange();
						range.setStartAfter(lastNode);
						range.collapse(true);
						sel.removeAllRanges();
						sel.addRange(range);
					}
				}
			} else if (document.selection && document.selection.type != "Control") {
				// IE < 9
				document.selection.createRange().pasteHTML(html);
			}
			textChange();
		}
		//选择了图片
		function sendFile(t, type) {
			if (t.files) {
				// 获取上传文件对象
				var file = t.files[0];
				vm.tempFile = file;
				if (type == "image") {
					// 读取文件URL
					var reader = new FileReader();
					reader.readAsDataURL(file);
					// 阅读文件完成后触发的事件
					reader.onload = function () {
						// 读取的URL结果：this.result
						vm.sendMC(this.result, "image");
					}
				} else {
					vm.sendMC("正在发送: " + file.name, "file");
				}
			}
		}
	</script>

</body>

</html>